<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container"  v-if="query.title">
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
           {{ query.title }}
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="flex_center nav_box">
        <nav
          @click="routerPath(item.path)"
          v-for="(item, index) in list"
          :key="index"
          :class="actives.indexOf(item.path) != -1 ? 'nav_active' : ''"
        >
          {{ item.name }}
        </nav>
      </div>
      <MterialsSupplies v-if="actives == 'materialsSupplies'" />
      <Water v-if="actives == 'water'" />
      <ReachStandard v-if="actives == 'reachStandard'" />
      <StateRequest v-if="actives == 'stateRequest'" />
      <!-- <router-view /> -->
    </div>
  </div>
</template>

<script>
import MterialsSupplies from "@/views/parcel/seven/materialsSupplies.vue"; //原物料消耗率
import Water from "@/views/parcel/seven/water.vue"; //水利用率/吨耗电
import ReachStandard from "@/views/parcel/seven/reachStandard.vue"; //不达标项分析
import StateRequest from "@/views/parcel/seven/writeStateRequest.vue"; //客户投诉率
export default {
  components: {
    MterialsSupplies,
    Water,
    ReachStandard,
    StateRequest,
  },
  data() {
    return {
      list: [
        { name: "原物料消耗与生产效率", path: "materialsSupplies" },
        { name: "水利用率/吨耗电", path: "water" },
        { name: "客诉率、制程合格率分析与不达标项分析", path: "stateRequest" },
        { name: "人均产出、单班产出率和维修费用", path: "reachStandard" },
      ],
      actives: "materialsSupplies",
           //路由信息
      query: { title: "" },
    };
  },
  created() {
      if (this.$route.query.title) {
      this.query = this.$route.query;
    } else {
      this.query = { title: "" };
    }
    // this.actives = this.$route.path;
  },
  methods: {
    //路由跳转
    routerPath(path) {
      this.actives = path;
      // this.$router.push(path);
    },
  },
  watch: {
    // $route: {
    //   handler(val, oldval) {
    //     this.actives = this.$route.path;
    //   },
    //   // 深度观察监听
    //   deep: true,
    // },
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  // overflow: hidden;
  // height: 100px;
  .content {
    width: 100%;
    padding-bottom: 0;
    .nav_box {
      width: 100%;
      height: 55px;
      nav {
        padding: 13px 29px;
        font-size: 15px;
        background: url("../../../assets/images/echarts/btnblue.png");
        background-size: 100% 100%;
        margin-left: 4px;
        color: #0dcef1;
        border-radius: 9px;
        cursor: pointer;
      }
      .nav_active {
        background: url("../../../assets/images/echarts/btnyellow.png");
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
  }
}
</style>